<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/4/18 0018
  Time: 22:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色</title>
    <jsp:include page="/common/backend_common.jsp" />
    <link rel="stylesheet" href="/ztree/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="/assets/css/bootstrap-duallistbox.min.css" type="text/css">
    <script type="text/javascript" src="/ztree/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="/assets/js/jquery.bootstrap-duallistbox.min.js"></script>
    <style type="text/css">
        .bootstrap-duallistbox-container .moveall, .bootstrap-duallistbox-container .removeall {
            width: 50%;
        }
        .bootstrap-duallistbox-container .move, .bootstrap-duallistbox-container .remove {
            width: 49%;
        }
    </style>
</head>
<body class="no-skin" youdao="bind" style="background: white">
<input id="gritter-light" checked="" type="checkbox" class="ace ace-switch ace-switch-5"/>
<div class="page-header">
    <h1>
        角色管理
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            维护角色与用户, 角色与权限关系
        </small>
    </h1>
</div>
<div class="main-content-inner">
    <div class="col-sm-3">
        <div class="table-header">
            角色列表&nbsp;&nbsp;
            <a class="green" href="#">
                <i class="ace-icon fa fa-plus-circle orange bigger-130 role-add"></i>
            </a>
        </div>
        <div id="roleList"></div>
    </div>
    <div class="col-sm-9">
        <div class="tabbable" id="roleTab">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a data-toggle="tab" href="#roleAclTab">
                        角色与权限
                    </a>
                </li>
                <li>
                    <a data-toggle="tab" href="#roleUserTab">
                        角色与用户
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="roleAclTab" class="tab-pane fade in active">
                    <ul id="roleAclTree" class="ztree"></ul>
                    <button class="btn btn-info saveRoleAcl" type="button">
                        <i class="ace-icon fa fa-check bigger-110"></i>
                        保存
                    </button>
                </div>

                <div id="roleUserTab" class="tab-pane fade" >
                    <div class="row">
                        <div class="box1 col-md-6">待选用户列表</div>
                        <div class="box1 col-md-6">已选用户列表</div>
                    </div>
                    <select multiple="multiple" size="10" name="roleUserList" id="roleUserList" >
                    </select>
                    <div class="hr hr-16 hr-dotted"></div>
                    <button class="btn btn-info saveRoleUser" type="button">
                        <i class="ace-icon fa fa-check bigger-110"></i>
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="dialog-role-form" style="display: none;">
    <form id="roleForm">
        <table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid">
            <tr>
                <td><label for="roleName">名称</label></td>
                <td>
                    <input type="text" name="name" id="roleName" value="" class="text ui-widget-content ui-corner-all">
                    <input type="hidden" name="id" id="roleId"/>
                </td>
            </tr>
            <tr>
                <td><label for="roleStatus">状态</label></td>
                <td>
                    <select id="roleStatus" name="status" data-placeholder="状态" style="width: 150px;">
                        <option value="1">可用</option>
                        <option value="0">冻结</option>
                    </select>
                </td>
            </tr>
            <td><label for="roleRemark">备注</label></td>
            <td><textarea name="remark" id="roleRemark" class="text ui-widget-content ui-corner-all" rows="3" cols="25"></textarea></td>
            </tr>
        </table>
    </form>
</div>
<script id="roleListTemplate" type="x-tmpl-mustache">
<ol class="dd-list ">
    {{#roleList}}
        <li class="dd-item dd2-item role-name" id="role_{{id}}" href="javascript:void(0)" data-id="{{id}}">
            <div class="dd2-content" style="cursor:pointer;">
            {{name}}
            <span style="float:right;">
                <a class="green role-edit" href="#" data-id="{{id}}" >
                    <i class="ace-icon fa fa-pencil bigger-100"></i>
                </a>
                &nbsp;
                <a class="red role-delete" href="#" data-id="{{id}}" data-name="{{name}}">
                    <i class="ace-icon fa fa-trash-o bigger-100"></i>
                </a>
            </span>
            </div>
        </li>
    {{/roleList}}
</ol>
</script>

<script id="selectedUsersTemplate" type="x-tmpl-mustache">
{{#userList}}
    <option value="{{id}}" selected="selected">{{username}}</option>
{{/userList}}
</script>

<script id="unSelectedUsersTemplate" type="x-tmpl-mustache">
{{#userList}}
    <option value="{{id}}">{{username}}</option>
{{/userList}}
</script>

<script type="text/javascript">
    $(function () {
         var roleMap = {};
         var lastRoleId = -1;
         var selectFirstTab = true;
         var hasMultiSelect = false;

         var roleListTemplate = $("#roleListTemplate").html();
         Mustache.parse(roleListTemplate);

         loadRoleList();

         function loadRoleList() {
            $.ajax({
                url : "/sys/role/list.json",
                success :function (result) {
                    if (result.ret) {
                        var rendered = Mustache.render(roleListTemplate,{roleList:result.data});
                        $("#roleList").html(rendered);
                        bindRoleClick();
                        $.each(result.data,function (i,role) {
                            roleMap[role.id] = role;
                        });
                    }else {
                        showMessage("加载角色列表",result.msg,false);
                    }
                }
            });

         function loadRoleAcl() {


         }

         function bindRoleClick() {
             $(".role-edit").click(function(e) {
                 e.preventDefault();
                 e.stopPropagation();
                 var roleId = $(this).attr("data-id");
                 $("#dialog-role-form").dialog({
                     model: true,
                     title: "修改角色",
                     open: function(event, ui) {
                         $(".ui-dialog-titlebar-close", $(this).parent()).hide();
                         $("#roleForm")[0].reset();
                         var targetRole = roleMap[roleId];
                         if(targetRole) {
                             $("#roleId").val(roleId);
                             $("#roleName").val(targetRole.name);
                             $("#roleStatus").val(targetRole.status);
                             $("#roleRemark").val(targetRole.remark);
                         }
                     },
                     buttons : {
                         "修改": function(e) {
                             e.preventDefault();
                             updateRole(false, function (data) {
                                 $("#dialog-role-form").dialog("close");
                                 loadRoleList();
                             }, function (data) {
                                 showMessage("修改角色", data.msg, false);
                             })
                         },
                         "取消": function () {
                             $("#dialog-role-form").dialog("close");
                         }
                     }
                 });
             });
             $(".role-name").click(function (e) {
                 e.preventDefault();
                 e.stopPropagation();
                 var roleId = $(this).attr("data-id");
                 handleRoleSelected(roleId);
             })
         }
             function handleRoleSelected(roleId) {
                 if(lastRoleId !=-1) {
                     var lastRole = $("#role_" + lastRoleId + " .dd2-content:first");
                     lastRole.removeClass("btn-yellow");
                     lastRole.removeClass("no-hover");
                 }
                 var currentRole = $("#role_" + roleId + " .dd2-content:first");
                 currentRole.addClass("btn-yellow");
                 currentRole.addClass("no-hover");
                 lastRoleId = roleId;
                 //选中第一个tab的时候触发的
                 $("#roleTab a:first").trigger("click");
                 if(selectFirstTab) {
                     loadRoleAcl();
                 }
             }
         }

        $(".role-add").click(function() {
            $("#dialog-role-form").dialog({
                model: true,
                title: "新增角色",
                open: function(event, ui) {
                    $(".ui-dialog-titlebar-close", $(this).parent()).hide();
                    $("#roleForm")[0].reset();
                },
                buttons : {
                    "添加": function(e) {
                        e.preventDefault();
                        updateRole(true, function (data) {
                            $("#dialog-role-form").dialog("close");
                        }, function (data) {
                            showMessage("新增角色", data.msg, false);
                        })
                    },
                    "取消": function () {
                        $("#dialog-role-form").dialog("close");
                    }
                }
            });
        });

        function updateRole(isCreate, successCallback, failCallback) {
            $.ajax({
                url: isCreate ? "/sys/role/save.json" : "/sys/role/update.json",
                data: $("#roleForm").serializeArray(),
                type: 'POST',
                success: function(result) {
                    if (result.ret) {
                        loadRoleList();
                        if (successCallback) {
                            successCallback(result);
                        }
                    } else {
                        if (failCallback) {
                            failCallback(result);
                        }
                    }
                }
            })
        }


    })
</script>


</body>
</html>
